<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>
    <title>Title</title>

    <script>

        var _maq = _maq || [];

        var _sessionId = "${sessionId}";

        _maq.push({'_setAccount' : 'website'});
        _maq.push({'_sessionId' : _sessionId});

        (function () {
            var ma = document.createElement("script");
            ma.type = "text/javascript";
            ma.async = true;
            // a ? 0 : 1
            ma.src = ("https:" == document.location.protocol?
                'https://localhost:8080/static/js/ga.js' : 'http://localhost:8080/static/js/ga.js');
            // document.getElementById
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(ma, s);
        })();

    </script>

    <!-- 导入 js jquery 库-->
    <script type="text/javascript" src="/static/js/jquery.min.js"></script>


    <link href="/static/css/index.css" rel="stylesheet" type="text/css" />

    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <script src="/static/layui/layui.js"></script>

    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="/static/bootstrap-3.3.7-dist/js/bootstrap.js"></script>

    <script>
    </script>

    <script>

        $(function(){


            // 鼠标移入事件
            $(".more").mousemove(function(){
                $(".more_info").show();

            });

            // 鼠标移出事件
            $(".more").mouseleave(function(){
                $(".more_info").hide();


            });


            // 鼠标移入事件
            // .svip_box 头像超链接对象
            $(".svip_box").mousemove(function(){
                // .user_info 显示
                $(".user_info").show();
                // 动态的修改图片的 src 属性值
                // .up_zhe_hao 图片对象
                $(".up_zhe_hao").attr("src", "/static/img/zhe_hao_up.png");

            });


            // 鼠标移出事件
            $(".svip_box").mouseleave(function(){
                $(".user_info").hide();
                $(".up_zhe_hao").attr("src", "/static/img/zhe_hao_down.png");


            });


            // 给左边 文件类型 第一个 超链接 添加背景色
            $(".center_left ul li:first").css("background-color","#CCCCCC");


            // 鼠标单击事件
            $(".shebei").click(function(){
                console.log(111);
                $("#mainIframe").attr("src", "shebei_list.html");

            });

        });

    </script>



</head>


<body>


<div class="nav" id="nav">


    <div class="nav_left" id="nav_left">

        <a href="#" class="logo">
            <img src="/static/img/logo.png" width="157" height="51" />
        </a>

        <a href="#"> 网盘 </a>

        <!--        <img class="share_red_dot" src="img/share_red_dot.png" width="20" height="20" />-->

        <a href="#"> 分享 </a>
        <a href="#"> 找资源 </a>

        <!--        <img class="sanJiao_xia" src="img/sanJiao_xia.png" width="18" height="18" />-->
        <a href="#" class="more"> 更多 </a>


    </div>

    <div class="nav_right" id="nav_right">

        <a href="#" class="xufei"> 现在续费 持续畅享特权 </a>

        <a href="#" class="touXiang svip_box">
            <img src="/static/img/touXiang.png" width="40" height="40" />
        </a>

        <div class="user_info svip_box">

                <a href="#" class="list-group-item active">
                    资源发布记录
                </a>
                <a href="#" class="list-group-item">设备管理</a>
                <a href="#" class="list-group-item">个人资料</a>
                <a href="#" class="list-group-item">设置二级密码</a>
                <a href="#" class="list-group-item">帮助中心</a>
                <a href="#" class="list-group-item">退出</a>

        </div>

        <span class="svip_box"> ${username} </span>

        <a href="#" class="svip svip_box">
            <img src="/static/img/svip.png" width="50" height="40" />
        </a>

        <img class="up_zhe_hao svip_box" src="/static/img/zhe_hao_down.png" width="30" height="30" />

        <a href="#"> 客户端下载 </a>

        <a href="#" class="msg">
            <img src="/static/img/msg.png" width="25" height="25" />
        </a>

        <a href="#" class="fanKui">
            <img src="/static/img/fanKui.png" width="25" height="25" />
        </a>

        <a href="#" class="piFu">
            <img src="/static/img/piFu.png" width="25" height="25" />
        </a>

        <a class="touXiang" href="#">
            <img src="/static/img/vipHome.png" width="90" height="35" />
        </a>

</div>


<div class="more_info">
    <img src="/static/img/more_info.png" width="560" height="240" />
</div>


<div class="center" id="center">

    <div class="center_left" id="center_left">

        <ul>

            <img class="all_file" src="/static/img/all_file.png" width="30" height="30" />

            <li><a href="#">全部文件</a></li>
            <li><a href="#">图片</a></li>
            <li><a href="#">文档</a></li>
            <li><a href="#">视频</a></li>
            <li><a href="#">种子</a></li>
            <li><a href="#">音乐</a></li>
            <li><a href="#">其它</a></li>

            <img class="share" src="/static/img/share.png" width="25" height="25" />
            <li><a href="#">我的分享</a></li>
            <li><a href="#">回收站</a></li>
            <li><a class="shebei" href="#">智能设备</a></li>
            <li>3460G/10T&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" class="kuoRong">扩容</a></li>
        </ul>



    </div>

    <div class="center_right" id="center_right">

        <iframe
                id="mainIframe"
                name="mainIframe"
                src="/fileList"
                frameborder="0"
                scrolling="auto" >

        </iframe>

    </div>

</div>
</div>

</body>
</html>
